<template>
    <div class="app-container">
        <el-steps :active="2" finish-status="success">
            <el-step title="填写课程基本信息"></el-step>
            <el-step title="创建课程大纲"></el-step>
            <el-step title="最终发布"></el-step>
        </el-steps>
        <el-button type="text" @click="openChapterDialog()">添加章节</el-button>


        <!-- 中间是主体  章节下有小节 -->

        <div class="custom-tree-container">
            <div class="block">
                <el-tree :data="data" node-key="id" default-expand-all :expand-on-click-node="false"
                    :render-content="renderContent">
                </el-tree>

            </div>

            <div>
                <el-button @click="previous">上一步</el-button>
                <el-button type="primary" @click="next">下一步</el-button>
            </div>
        </div>
    </div>
</template>

<script>
let id = 1000;
export default {

    data() {

        const data = [{
            id: 1,
            label: '一级 1',
            children: [{
                id: 4,
                label: '二级 1-1',

            }]
        }, {
            id: 2,
            label: '一级 2',
            children: [{
                id: 5,
                label: '二级 2-1'
            }, {
                id: 6,
                label: '二级 2-2'
            }]
        }, {
            id: 3,
            label: '一级 3',
            children: [{
                id: 7,
                label: '二级 3-1'
            }, {
                id: 8,
                label: '二级 3-2'
            }]
        }];
        return {
            data: JSON.parse(JSON.stringify(data))
        }
    },
    created() {
        //获取路由的id值
        console.log("======")
        console.log(this.$route.query.courseId)



    },

    methods: {
        next() {
            this.$router.push({ path: '/course/publish', query: { courseId: 1 } })
        },
        openVideo(data) {
            const { href } = this.$router.resolve({
                path: '/video'
            });
            window.open(href, '_blank');
        },
        append(data) {
            console.log(data)
            // const newChild = { id: id++, label: 'testtest', children: [] };
            // if (!data.children) {
            //     this.$set(data, 'children', []);
            // }
            // data.children.push(newChild);
        },

        remove(node, data) {
            console.log(node)
            // const parent = node.parent;
            // const children = parent.data.children || parent.data;
            // const index = children.findIndex(d => d.id === data.id);
            // children.splice(index, 1);
        },

        renderContent(h, { node, data, store }) {
            if (node.level == 1) {

                return (
                    <span class="custom-tree-node">
                        <span>{node.label}</span>

                        <span>
                            <el-button size="mini" type="text" on-click={() => this.append(data)}>添加小节</el-button>
                            <el-button size="mini" type="text" on-click={() => this.remove(node, data)}>删除</el-button>
                        </span>
                    </span>);

            } else {
                return (
                    <span class="custom-tree-node">
                        <span>{node.label}</span>
                        <span>
                            <el-button size="mini" type="text" on-click={() => this.openVideo(data)}>预览</el-button>
                            <el-button size="mini" type="text" on-click={() => this.remove(node, data)}>删除</el-button>
                        </span>

                    </span>);
            }

        }
    }

}

</script>

<style>
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
}
</style>